<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="activeSearch" :inline="true" size="mini">
                <el-form-item label="活动名称：">
                    <el-input v-model="activeSearch.name" clearable placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="activeTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="活动名称" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="活动图片" width="120px">
                    <template slot-scope="scope">
                        <div @click="browse(scope.$index, scope.row)">
                            <img :src="scope.row.cover" style="width:50px;" alt="活动图片" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="主页弹窗" width="120px">
                    <template slot-scope="scope">
                        <!-- <el-switch
                            :active-value="1" 
                            :inactive-value="0"
                            v-model="scope.row.homepage"
                            @change="homepageChange(scope.$index, scope.row)"
                        ></el-switch> -->
                        <el-switch
                            v-if="jurisdiction.update_state === 1"
                            v-model="scope.row.homepage"
                            :active-value="1"
                            :inactive-value="0"
                            @change="homepageChange(scope.$index, scope.row)"
                        >
                        </el-switch>
                        <span v-else>{{ stateswitch[scope.row.homepage] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="主页轮播" width="120px">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="jurisdiction.update_state === 1"
                            v-model="scope.row.home_banner"
                            :active-value="1"
                            :inactive-value="0"
                            @change="homebannerChange(scope.$index, scope.row)"
                        ></el-switch>
                        <span v-else>{{ stateswitch[scope.row.home_banner] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="个人中心轮播" width="120px">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="jurisdiction.update_state === 1"
                            v-model="scope.row.my_banner"
                            :active-value="1"
                            :inactive-value="0"
                            @change="homemyChange(scope.$index, scope.row)"
                        ></el-switch>
                        <span v-else>{{ stateswitch[scope.row.my_banner] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值轮播" width="120px">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="jurisdiction.update_state === 1"
                            v-model="scope.row.recharge_banner"
                            :active-value="1"
                            :inactive-value="0"
                            @change="rechargebannerChange(scope.$index, scope.row)"
                        ></el-switch>
                        <span v-else>{{ stateswitch[scope.row.recharge_banner] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券名称" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券数量" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_num }}张</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券面额" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券截止时间" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.end_time*1000 | formatDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车辆类型" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_type | cartype }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="外部链接" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.out_url }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布人" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.publish }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.note }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>

            <el-dialog center width="600px" :visible.sync="dialogVisible">
                <div style="text-align:center;">
                    <img width="250px" height="auto" :src="dialogImageUrl" alt />
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js"
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            dialogVisible: false, //放大图片的对话框显示
            dialogImageUrl: "", //放大图片的路径
            activeSearch: {
                //搜索
                coupon_name: "", //优惠券名称
                merchantNumber: "", //商户号
                name: "" //活动名称
            },
            stateswitch: ["关闭","开启"],
            activeTable: [
                {
                    name: "南山分店", //活动名称
                    cover: "https://admin.chezhixi.top/record@2x.png", //活动图片
                    homepage: 1, //主页弹框
                    home_banner: 1, //主页轮播
                    my_banner: 1, //个人中心轮播
                    recharge_banner: 1, //充值轮播
                    coupon_name: "国庆优惠券", //优惠券名称
                    coupon_num: 100, //优惠券数量
                    coupon_money: 5, //优惠券面额
                    end_time: "2021-08-15", //优惠券截止时间
                    city: "深圳", //城市
                    car_type: "小汽车", //车辆类型
                    out_url: "www.baidu.com", //外部链接
                    publish: "张三", //发布人
                    note: "" //备注
                },
                {
                    name: "宝安分店", //活动名称
                    cover: "https://admin.chezhixi.top/record@2x.png", //活动图片
                    homepage: 0, //主页弹框
                    home_banner: 0, //主页轮播
                    my_banner: 0, //个人中心轮播
                    recharge_banner: 0, //充值轮播
                    coupon_name: "国庆优惠券", //优惠券名称
                    coupon_num: 100, //优惠券数量
                    coupon_money: 5, //优惠券面额
                    end_time: "2021-08-15", //优惠券截止时间
                    city: "深圳", //城市
                    car_type: "小汽车", //车辆类型
                    out_url: "www.baidu.com", //外部链接
                    publish: "张三", //发布人
                    note: "" //备注
                },
                {
                    name: "福田分店", //活动名称
                    cover: "https://admin.chezhixi.top/record@2x.png", //活动图片
                    homepage: 1, //主页弹框
                    home_banner: 1, //主页轮播
                    my_banner: 1, //个人中心轮播
                    recharge_banner: 1, //充值轮播
                    coupon_name: "国庆优惠券", //优惠券名称
                    coupon_num: 100, //优惠券数量
                    coupon_money: 5, //优惠券面额
                    end_time: "2021-08-15", //优惠券截止时间
                    city: "深圳", //城市
                    car_type: "小汽车", //车辆类型
                    out_url: "www.baidu.com", //外部链接
                    publish: "张三", //发布人
                    note: "" //备注
                }
            ]
        };
    },
    filters:{
        cartype(num){
            if(num === 0){
                num = "通用"
            }else if(num === 1){
                num = "小汽车"
            }else if(num === 2){
                num = "SUV"
            }else if(num === 3){
                num = "MPV"
            }else{return}
            return num
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount}
            for(var i in this.activeSearch) this.activeSearch[i] !== "" ? data[i] = this.activeSearch[i] : "";
            utils.request("/activity/list","post",JSON.stringify(data)).then(res=>{
                console.log(res)
                this.activeTable = res.data.data.data;
                this.pageResultSize = res.data.data.total;
                if(num === 2){
                    res.data.data.total > 0 
                    ? this.$message({
                        message: "找到"+res.data.data.total+"条活动数据",
                        type: "success"
                    }) : this.$message("没有符合条件的活动")
                }else{ return }
            })
        },
        add() {
            // 添加广告活动
            this.$router.push("/addCampaign");
        },

        browseStoreUrl(index, row) {
            this.dialogImageUrl = row.storeUrl;
            this.dialogVisible = true;
        },
        browse(index, row) {
            console.log(index, row);
            this.dialogImageUrl = row.cover;
            this.dialogVisible = true;
        },
        homepageChange(index, row) {
            // 主页弹框广告
            // console.log(index, row);
            // console.log(typeof(row.homepage),row.homepage)
            utils.request("/activity/update","post",JSON.stringify({id:row.id,homepage:row.homepage})).then(resp=>{
                console.log(resp)
                // if(resp.data.data.code === 200){
                //     this.activeTable[index].homepage = num;
                // }
            })
        },
        homebannerChange(index, row) {
            // 主页轮播广告
            // console.log(index, row);
            utils.request("/activity/update","post",JSON.stringify({id:row.id,home_banner:row.home_banner})).then(resp=>{
                console.log(resp)
            })
        },
        homemyChange(index, row) {
            // 个人中心轮播广告
            // console.log(index, row);
            utils.request("/activity/update","post",JSON.stringify({id:row.id,my_banner:row.my_banner})).then(resp=>{
                console.log(resp)
            })
        },
        rechargebannerChange(index, row) {
            // 充值轮播广告
            // console.log(index, row);
            utils.request("/activity/update","post",JSON.stringify({id:row.id,recharge_banner:row.recharge_banner})).then(resp=>{
                console.log(resp)
            })
        },
        edit(index, row) {
            // 修改
            this.$router.push({path:"/editCampaign",query:{row:JSON.stringify(row)}});
        },
        remove(index, row) {
            // 删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/activity/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    if(resp.data.code === 200){
                        this.activeTable.splice(index,1);
                        this.$message({
                            message: "活动删除成功！",
                            type: "success"
                        })
                    }else{return}
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            this.shopname = resp.data.data.data.map((item)=>{
                return{
                    id: item["id"],
                    name: item["name"]
                }
            })
        })
        this.searchClick(1);
    }
};
</script>


